<template>
  <h3> 当前播放:《{{nowMp3.name||'无'}}》 </h3>
  <div>
    <p v-for="(item,index) in songList"
       :key="index">
      {{item.name}}
      <a-button type="primary"
                @click="handlePlay(item)">播放</a-button>
    </p>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router';
import { findPlaylistByListId, getSongUrlById } from "@/utils/api"
import { message, Modal } from 'ant-design-vue';
import { useStore } from 'vuex'
import { ref, } from 'vue'
export default {
  setup() {
    const Audio = document.createElement("audio")
    Audio.autoplay = false

    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const songListId = ref(route.params.id || '')
    const userInfo = store.state.users || {}
    if (!userInfo.profile) {
      Modal.error({
        title: '提示',
        content: '未登录仅能试听片段，ctrl+Alt+s 暂停音乐',
      });
    } else {
      Modal.error({
        title: '提示',
        content: '当前已登录，ctrl+Alt+s 暂停音乐',
      });
    }

    let songList = ref([])
    let nowMp3 = ref({})

    const _getData = () => {
      findPlaylistByListId({
        id: songListId.value
      }).then(res => {
        const { playlist = {} } = res
        const tracks = playlist.tracks || []
        _getSongUrl(tracks.map(i => i.id).join(','), tracks)
        console.log('歌单详情11', tracks);
      })
    }
    const _getSongUrl = (id, tracks) => {
      getSongUrlById({
        id
      }).then(res => {
        console.log('音乐url', res);
        tracks.map(i => {
          i.mp3Url = res.find(j => i.id === j.id).url
        })
        songList.value = tracks
        console.log('最终歌单', tracks);
      })
    }
    _getData()
    const handlePlay = item => {
      store.commit('setMusicInfo', item)

      nowMp3.value = item
      message.success('播放歌曲：' + item.name)
    }
    return {
      songList,
      handlePlay,
      nowMp3
    }
  },
}
</script>

<style>
</style>